<template>
  <div class="block-box mar-t32 padlr320" v-if="list.length">
    <div class="block-tit">套餐比对</div>
    <div class="card-list flex ju-ar mar-t40">
      <div
        class="card-li padlr20 padtb30"
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'card-li-on': index === cardCurrent }"
        @click="cardCurrent = index"
      >
        <div class="li-img">
          <el-image
            style="width: 200px; height: 230px"
            :src="getAssetsImages('trademark-card' + Number(index + 1))"
          />
        </div>
        <div class="li-name pad-b20">{{ item.title }}</div>
        <div v-html="item.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 套餐对比组件
*/
import { ref, defineProps } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
    service_id: {
        type: String,
        default: ""
    }
})
let list = ref([])
let cardCurrent = ref(0)
const getServicePackage = () => { 
  serviceApi.servicePackage({
    service_id: props.service_id
  }).then(res => { 
    list.value = res.data;
  })
}
getServicePackage();
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.block-box {
  .block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
  }
  .card-list {
    .card-li {
      width: 24%;
      height: 280px;
      background: linear-gradient(180deg, #f0f3f7, #ffffff);
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
      position: relative;
      .li-img {
        position: absolute;
        bottom: 0;
        right: 0;
      }
      .li-name {
        font-size: 24px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: center;
        color: #202020;
      }
    }
    .card-li-on {
      background: linear-gradient(180deg, #cfddf1, #f3f8ff);
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08),
        0px -8px 0px 0px #0052d9 inset;
    }
  }
}
</style>